<template>
  <div class="warp-main">
    <div class="doc_left">
      <!--      <span class="resource-title">资讯分类</span>-->
      <el-input
        v-model="filterText"
        style="width: 100%"
        clearable
        placeholder="请输入资讯类别关键字"
      />
      <div class="tree-container">
        <el-tree
          :props="defaultProps.value"
          ref="treeRef" :load="loadNode"
          lazy
          node-key="infoCategoryId"
          :expand-on-click-node="false"
          :default-expanded-keys="[1]"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick">
          <template #default="{ node, data }">
            <div class="tree-item">
              <img src="../../../assets/icons/file/folder.png" style="margin-right: 2px; width: 15px; height: 15px"/>
              <div class="resource-title">{{data.categoryName}}</div>
            </div>
          </template>
        </el-tree>
      </div>
    </div>
    <div class="doc_right">
      <div class="doc_top">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="cursor:pointer;">
          <!--          <el-breadcrumb-item @click.native="handleToHome">-->
          <!--            <div>-->
          <!--              <span class="resource-title">全部资讯</span>-->
          <!--            </div>-->
          <!--          </el-breadcrumb-item>-->
          <el-breadcrumb-item v-for="item in breadOptionData.value" :key="item.id" @click.native="handleIn(item)">{{
            item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="doc_right-container">
        <PageSearch
          v-show="showPageSearch"
          ref="pageSearchRef"
          :pageName="pageName"
          :searchConfig="searchConfigComputed">
        </PageSearch>
        <PageContent
          ref="pageContentRef"
          :pageName="pageName"
          :contentConfig="contentConfigComputed"
          :descConfig="descConfig"
          :showPageSearch="showPageSearch"
          :dictMap="dictMap"
          :tableListener="tableListener"
          :tableSelected="tableSelected"
          :permission="permission"
          :requestBaseUrl="requestBaseUrl"
          @beforeSend="beforeSend"
          @addClick="addClick"
          @editBtnClick="editBtnClick"
          @onChangeShowColumn="onChangeShowColumn"
          @triggerShowSearch="triggerShowSearch"
          @editMoreClick="editMoreClick"
        >
          <template #publishStatusSlot="{ backData }">
            <dict-tag :options="information_publish_status" :value="backData.publishStatus"/>
          </template>
          <template #hotspotSlot="{ backData }">
            <dict-tag :options="information_hotspot" :value="backData.hotspot"/>
          </template>
          <template #statusSlot="{ backData }">
            <dict-tag :options="sys_normal_disable" :value="backData.status"/>
          </template>
          <template #todoSlot="{ backData }">
            <div class="ml12 order11">
              <div>
                <el-button type="warning" size="small" @click="toDetail(backData)">查看</el-button>
              </div>
            </div>
          </template>
        </PageContent>
        <div class="information-container">
          <el-drawer v-model="visible" :show-close="false" :close-on-click-modal="false" size="90%"
                     :before-close="handleClose" @open="openDrawer">
            <template #header="{ close, titleId, titleClass }">
              <div class="header">
                <h4 v-if="visible && form.informationId" :id="titleId" :class="titleClass">资讯详情</h4>
                <h4 v-else :id="titleId" :class="titleClass">新建资讯</h4>
                <div class="button-container">
                  <div class="button-container-item">
                    <el-button type="danger" @click="closeKnowledge">
                      <el-icon class="el-icon--left">
                        <CircleCloseFilled/>
                      </el-icon>
                      关闭
                    </el-button>
                  </div>
                  <div class="button-container-item" v-if="!showDetail || form.publishStatus == '0'">
                    <el-button type="primary" @click="submitKnowledge">
                      <el-icon class="el-icon--left">
                        <Check/>
                      </el-icon>
                      保存
                    </el-button>
                  </div>
                  <div class="button-container-item" v-if="form.publishStatus == '0' && form.informationId">
                    <el-button type="warning" @click="onLine" v-hasPermi="[permission.status]">
                      <el-icon class="el-icon--left">
                        <Promotion/>
                      </el-icon>
                      申请上线
                    </el-button>
                  </div>
                  <div class="button-container-item" v-if="form.publishStatus == '3'">
                    <el-button type="warning" @click="offLine" v-hasPermi="[permission.offline]">
                      <el-icon class="el-icon--left">
                        <Promotion/>
                      </el-icon>
                      下线
                    </el-button>
                  </div>
                  <div class="button-container-item" v-if="form.publishStatus == '1'">
                    <el-button type="warning" @click="reject"
                               v-hasPermi="[permission.approved]">
                      <el-icon class="el-icon--left">
                        <Check/>
                      </el-icon>
                      驳回
                    </el-button>
                  </div>
                  <div class="button-container-item" v-if="form.publishStatus == '1'">
                    <el-button type="success" @click="approved"
                               v-hasPermi="[permission.approved]">
                      <el-icon class="el-icon--left">
                        <Check/>
                      </el-icon>
                      通过
                    </el-button>
                  </div>
                  <div class="button-container-item" v-if="form.publishStatus == '2'">
                    <el-button type="primary" @click="publish"
                               v-hasPermi="[permission.publish]">
                      <el-icon class="el-icon--left">
                        <Finished/>
                      </el-icon>
                      发布
                    </el-button>
                  </div>
                </div>
              </div>
            </template>
            <div v-if="showDetail" class="title-container">
              <span class="detail-title">{{form.title}}</span>
              <span class="publish-status-published">
                <dict-tag :options="information_publish_status" :value="form.publishStatus"/>
              </span>
            </div>
            <div v-else>
              <el-form :model="form">
                <el-form-item>
                  <el-input v-model="form.title" autocomplete="off" placeholder="请输入标题"/>
                </el-form-item>
              </el-form>
            </div>

            <div v-if="(!showDetail || form.publishStatus == '0')">
              <MdEditor class="my-editor" v-model="form.content" @onSave="onSave" @onUploadImg="onUploadImg"
                        :toolbars="toolbars">
                <template #defToolbars>
                  <ExportPDF :fileName="form.title" :modelValue="form.content"/>
                </template>
              </MdEditor>
            </div>
            <div v-else>
              <div class="publish-strategy-container">
                <div>
                  <el-form-item class="group-item" label="类别">
                    {{form.informationCategoryName}}
                  </el-form-item>
                </div>
                <div>
                  <el-form-item class="group-item" label="推送所有用户（包括非订阅用户）">
                    <el-switch v-model="form.toAllUser" disabled/>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item class="group-item" label="热点资讯">
                    <el-switch v-model="form.hotspot" disabled/>
                  </el-form-item>
                </div>
              </div>
              <!--仅浏览器-->
              <MdPreview class="my-preview" :editorId="mdPriviewId" :modelValue="form.content"
                         :scrollElement="scrollElement" :showCodeRowNumber="true"/>
            </div>
          </el-drawer>
          <div>
            <el-dialog
              v-model="publishVisible"
              :show-close="false"
              width="500"
              :close-on-click-modal="false">
              <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                  <h4 :id="titleId" :class="titleClass">上线策略</h4>
                  <el-button type="danger" @click="close">
                    <el-icon class="el-icon--left">
                      <CircleCloseFilled/>
                    </el-icon>
                    Close
                  </el-button>
                </div>
              </template>
              <div class="publish-container">
                <el-tree-select
                  v-model="selectedCategory"
                  node-key="id"
                  :data="informationCategoryOptions"
                  :render-after-expand="false"
                  :check-strictly="true"
                  placeholder="请选择类别"
                  :v-bind=" { label: 'label', value: 'id', children: 'children' }"
                  @update:modelValue="handleValueChange($event)"
                />
                <div class="group">
                  <el-form-item class="group-item" label="推送所有用户">
                    <el-switch v-model="selectedToAllUser"/>
                  </el-form-item>
                  <el-form-item class="group-item" label="热点资讯">
                    <el-switch v-model="selectedHotspot"/>
                  </el-form-item>
                </div>
              </div>
              <template #footer>
                <div class="my-footer">
                  <el-button @click="closeOnLineDialog">取消</el-button>
                  <el-button type="primary" @click="publishSubmit">
                    提交
                  </el-button>
                </div>
              </template>
            </el-dialog>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import {nextTick, watch} from 'vue'
  import {ElMessage, ElMessageBox, ElNotification, ElTree} from "element-plus";
  import getSearchConfig from './config/searchConfig'
  import getContentConfig from './config/contentConfig.js'
  import getDialogConfig from './config/dialogConfig.js'
  import useDialog from '@/hooks/useDialog'
  import getComputedConfig from '@/hooks/getPageConfig'
  import {systemBaseUrl} from '@/api/config/base.js'
  import {reactive, ref, onMounted} from "vue"
  import {getToken} from '@/utils/auth'
  import {Edit, Share, Delete, Search, Upload} from '@element-plus/icons-vue'
  import {MdEditor, MdPreview} from 'md-editor-v3';
  import {ExportPDF} from '@vavt/v3-extension';
  import '@vavt/v3-extension/lib/asset/ExportPDF.css';
  import 'md-editor-v3/lib/style.css';
  import to from "@/utils/to";
  import {
    listCategory,
    categoryTreeSelect,
    addCategory,
    getCategory,
    updateCategory,
    delCategory,
  } from "@/api/information/category";

  import {informationCategoryTreeSelect} from "@/api/basicdata/information-category";

  import {
    listInformation,
    addInformation,
    getInformation,
    updateInformation,
    updateStatus,
    delInformation
  } from "@/api/information/information";
  import axios from "axios";

  const prefix = import.meta.env.VITE_APP_BASE_API

  const {proxy} = getCurrentInstance()
  const {sys_normal_disable, sys_user_sex, information_publish_status, information_hotspot, status} = proxy.useDict(
    'sys_normal_disable',
    'information_publish_status',
    'information_hotspot',
    'status'
  )
  const requestBaseUrl = systemBaseUrl
  const informationCategoryOptions = ref([])
  const dictMap = {
    status: sys_normal_disable,
    sex: sys_user_sex,
    publishStatus: information_publish_status,
    hotspot: information_hotspot,
    informationCategoryId: informationCategoryOptions,
  }
  const pageName = 'information'
  const showPageSearch = ref(true)
  const pageSearchRef = ref(null)
  const pageContentRef = ref(null)
  const descConfig = ref({})
  const dialogHideItems = ref([])
  const tableHideItems = ref([])
  const showTree = ref(false)
  const tree = reactive([])
  const defaultProps = reactive({})
  const categoryPageNum = ref(1)
  const categoryPageSize = ref(10000)
  const pageNum = ref(1)
  const pageSize = ref(10)
  const authorizeHeader = reactive({})
  const searchLoading = ref(false)
  const breadOptionData = reactive([])
  const currentCategoryId = ref(null);
  const selectedCategory = ref();
  const selectedToAllUser = ref(false);
  const selectedHotspot = ref(false);
  const total = ref(0)
  const keywords = ref('');
  const scrollElement = document.documentElement;
  const mdPriviewId = ref('mdPriviewId');
  const showDetail = ref(false);
  const publishVisible = ref(false);
  const informationCategory = ref()
  const loadNode = (node, resolve) => {
    //如果展开第一级节点，从后台加载一级节点列表
    let level = node.level
    if (level == 0) {
      loadRootNode(resolve);
    } else {
      loadChildNode(node, resolve);
    }
  }
  //加载第一级节点
  const loadRootNode = (resolve) => {
    load(null, resolve, -1)
  }
  //加载节点的子节点集合
  const loadChildNode = (node, resolve, workspace) => {
    // console.log("超过二级的", node, node.level);
    let parentId = node.key
    let level = node.level

    load(node, resolve, parentId)

  }
  const load = async (node, resolve, parentId = -1) => {
    let params = {
      parentId: parentId,
      pageNum: categoryPageNum.value,
      pageSize: categoryPageSize.value,
    }
    const [err, res] = await to(listCategory(params))
    if (res) {
      return resolve(res.data);
    }
  }

  interface Tree {
    [key: string]: any
  }

  const treeRef = ref<InstanceType<typeof ElTree>>();
  const filterText = ref('');

  watch(
    filterText,
    (val) => {
      treeRef.value!.filter(val);
    }
  )

  const filterNode = (value, data) => {
    if (!value) {
      return true;
    }
    return data.categoryName.includes(value);
  }
  // const optionCardShow = ref(false);
  // const optionCardX = ref(null);
  // const optionCardY = ref(null);
  // const optionData = ref({});
  //
  // //节点右击事件
  // const rightClickOptions = (e, data, n, t) =>{
  //   console.log("rightClickOptions...", optionCardShow.value)
  //
  //   optionCardX.value = e.x   // 让右键菜单出现在鼠标右键的位置
  //   optionCardY.value = e.y - 110
  //   optionData.value = data
  //   treeRef.value = t
  //   optionCardShow.value = !optionCardShow.value  // 展示右键菜单
  // }

  const handleNodeClick = (data, node) => {
    let parentId = data.parentId
    let categoryId = data.infoCategoryId
    currentCategoryId.value = categoryId
    let breadOption = [];
    /*临时变量nodeData储存被点击节点的node信息，判断如果此节点有父节点，
    那么将相关信息添加到面包屑的首位，并将父节点赋值给临时节点，继续判断该节点是否有父节点*/
    let nodeData = node;
    while (nodeData.parent != null) {
      breadOption.unshift({
        'label': nodeData.data.categoryName,
        'id': nodeData.data.infoCategoryId,
        'parentId': nodeData.data.parentId
      });
      nodeData = nodeData.parent;
    }
    breadOptionData.value = breadOption
    //判断是不是根节点，若为根节点则查询所有数据。
    if (parentId == -1) {
      currentCategoryId.value = null
    }
    search()
  }
  const handleToHome = (categoryId) => {
    let breadOption = breadOptionData.value
    for (let i = breadOption.length; i > 0; i--) {
      if (breadOption[i - 1].id != categoryId) {
        breadOption.pop();
      } else {
        break;
      }
    }
    search()
  }

  const handleIn = (item) => {
    let parentId = item.parentId
    let categoryId = item.id
    let breadOption = breadOptionData.value
    for (let i = breadOption.length; i > 0; i--) {
      if (breadOption[i - 1].id != categoryId) {
        breadOption.pop();
      } else {
        break;
      }
    }
    breadOptionData.value = breadOption
    if (parentId == -1) {
      currentCategoryId.value = null
    }
    search()
  }

  const searchConfig = getSearchConfig()
  const searchConfigComputed = computed(() => {
    return getComputedConfig(searchConfig, dictMap)
  })
  const tableSelected = ref([])
  const tableListener = {
    selectionChange: (selected) => {
      tableSelected.value = selected
    },
  }
  const contentConfig = getContentConfig()
  const contentConfigComputed = computed(() => {
    contentConfig.hideItems = tableHideItems
    return contentConfig
  })

  const dialogConfig = getDialogConfig()

  const dialogConfigComputed = computed(() => {
    dialogConfig.hideItems = dialogHideItems
    return getComputedConfig(dialogConfig, dictMap)
  })

  const addCallBack = () => {
    dialogHideItems.value.length = 0
    visible.value = true
  }
  const toolbars = [
    'bold',
    'underline',
    'italic',
    '-',
    'strikeThrough',
    'title',
    'sub',
    'sup',
    'quote',
    'unorderedList',
    'orderedList',
    'task', // ^2.4.0
    '-',
    'codeRow',
    'code',
    'link',
    'image',
    'table',
    'mermaid',
    'katex',
    '-',
    'revoke',
    'next',
    'save',
    '0',
    '=',
    'pageFullscreen',
    'fullscreen',
    'preview',
    'htmlPreview',
    'catalog',
  ];
  const visible = ref(false)
  const form = reactive({
    informationId: null,
    informationCategoryId: null,
    informationCategoryName: null,
    title: '',
    content: '',
    publishStatus: null,
    hotspot: null,
    toAllUser: null,
    rePublish: null,
  })
  const editCallBack = (item, type, res) => {
    form.informationId = item.informationId
    form.title = item.title
    form.content = item.content
    form.publishStatus = item.publishStatus
    form.hotspot = item.hotspot == '0' ? false : true;
    form.toAllUser = item.toAllUser == '0' ? false : true;
    form.rePublish = item.rePublish == '0' ? false : true;
    form.informationCategoryId = item.informationCategoryId
    form.informationCategoryName = item.informationCategoryName
    isEditMore.value = type
    visible.value = true
    showDetail.value = true
  }
  const cancelKnowledge = () => {
    handleClose();
  }
  const closeKnowledge = () => {
    visible.value = false
    showDetail.value = false
    clearForm()
  }
  const handleClose = () => {
    ElMessageBox.confirm('是否要放弃本次修改?')
      .then(() => {
        showDetail.value = false
        visible.value = false
        clearForm()
      })
      .catch(() => {

      })
  }
  const clearForm = () => {
    visible.value = false
    showDetail.value = false

    form.title = ''
    form.content = ''
    form.publishStatus = null
    form.informationId = null
    form.informationCategoryId = null,
    form.informationCategoryName = null,
    form.hotspot = false,
    form.toAllUser = false
  }
  const onUploadImg = async (files, callback) => {
    const res = await Promise.all(
      files.map((file) => {
        return new Promise((rev, rej) => {
          const form = new FormData();
          form.append('file', file);
          axios
            .post(prefix + '/file/upload', form, {
              headers: {
                'Content-Type': 'multipart/form-data',
                Authorization: 'Bearer ' + getToken()
              }
            })
            .then((res) => rev(res))
            .catch((error) => rej(error));
        });
      })
    );

    // 方式一
    callback(res.map((item) => window.location.origin + item.data.data.url));
  };

  const save = async (form) => {
    let title = form.title
    if (!title) {
      ElMessage.warning('标题不能为空！');
      return
    }
    let informationId = form.informationId
    form.hotspot = form.hotspot ? '1' : '0';
    form.toAllUser = form.toAllUser ? '1' : '0';
    form.rePublish = form.rePublish ? '1' : '0';
    //更新
    if (informationId) {
      const [err, res] = await to(updateInformation(form))
      if (res) {
        visible.value = false
      }
    } else {
      const [err, res] = await to(addInformation(form))
      if (res) {
        // visible.value = false
      }
    }
    let params = {
      pageNum: 1,
      pageSize: pageSize.value,
    }
    search(params);
  }
  const onSave = async () => {
    save(form);
    clearForm();
  }
  //申请上线，选择资讯的类别和通知策略
  const onLine = async () => {
    let informationCategoryId = form.informationCategoryId
    const [error, res] = await to(getCategory(informationCategoryId))
    if(res){
      selectedCategory.value = informationCategoryId
      selectedHotspot.value = form.hotspot
    }
    publishVisible.value = true
  }

  //提审，提审后变为待审核
  const arraign = async () => {
    let informationId = form.informationId
    let data = {
      informationId: informationId,
      publishStatus: 1
    }
    const [err, res] = await to(updateStatus(data))
    if (res) {
      visible.value = false
      let params = {
        pageNum: 1,
        pageSize: pageSize.value,
      }
      search(params);
      clearForm();
    }
  }

  //发布，发布后变为已发布
  const publish = async () => {
    let informationId = form.informationId
    let data = {
      informationId: informationId,
      publishStatus: 3
    }
    const [err, res] = await to(updateStatus(data))
    if (res) {
      visible.value = false
      let params = {
        pageNum: 1,
        pageSize: pageSize.value,
      }
      search(params);
      clearForm();
    }
  }
  //下线，下线后变为已下线
  const offLine = async () => {
    let informationId = form.informationId
    let data = {
      informationId: informationId,
      publishStatus: 4
    }
    const [err, res] = await to(updateStatus(data))
    if (res) {
      visible.value = false
      let params = {
        pageNum: 1,
        pageSize: pageSize.value,
      }
      search(params);
      clearForm();
    }
  }
  //驳回，驳回后状态变为草稿
  const reject = async () => {
    let informationId = form.informationId
    let data = {
      informationId: informationId,
      publishStatus: 0
    }
    const [err, res] = await to(updateStatus(data))
    if (res) {
      visible.value = false
      let params = {
        pageNum: 1,
        pageSize: pageSize.value,
      }
      search(params);
      clearForm();
    }
  }

  //审核通过，通过后状态变为已发布
  const approved = async () => {
    let informationId = form.informationId
    let data = {
      informationId: informationId,
      publishStatus: 3
    }
    const [err, res] = await to(updateStatus(data))
    if (res) {
      visible.value = false
      let params = {
        pageNum: 1,
        pageSize: pageSize.value,
      }
      search(params);
      clearForm();
    }
  }

  const submitKnowledge = async () => {
    save(form);
    clearForm();
  }
  const openDrawer = () => {


  }
  const isEditMore = ref(false)
  const editMoreClick = () => {
    if (tableSelected.value.length > 0) {
      const data = tableSelected.value[0]
      pageContentRef.value?.editClick(data, true)
      nextTick(() => {
        const newArray = tableSelected.value.slice(1)
        dialogRef.value?.changeSelected(newArray)
      })
    }
  }

  const editNext = (data) => {
    pageContentRef.value?.editClick(data, true)
  }

  const [dialogRef, infoInit, addClick, editBtnClick] = useDialog(
    addCallBack,
    editCallBack,
    '添加'
  )

  const dialogWidth = ref('610px')
  const searchData = computed(() => {
    return pageContentRef.value?.finalSearchData
  })

  const search = () => {
    pageSearchRef.value?.search()
  }

  const beforeSend = (queryInfo) => {
    let informationCategoryId = currentCategoryId.value
    if (informationCategoryId) {
      queryInfo['informationCategoryId'] = informationCategoryId
    }
  }

  const permission = {
    add: 'customer:real-time-info:add',
    edit: 'customer:real-time-info:edit',
    del: 'customer:real-time-info:remove',
    arraign: 'customer:real-time-info:arraign',
    publish: 'customer:real-time-info:publish',
    approved: 'customer:real-time-info:approved',
    status: 'customer:real-time-info:status',
    offline: 'customer:real-time-info:offline'
  }

  const triggerShowSearch = () => {
    showPageSearch.value = !showPageSearch.value
  }

  const onChangeShowColumn = (filterArr) => {
    tableHideItems.value = filterArr
  }


  /** 导出按钮操作 */
  const handleExport = () => {
    proxy.download(
      'system/post/export',
      {
        ...searchData.value,
      },
      `post_${new Date().getTime()}.xlsx`
    )
  }
  const toDetail = (data) => {
    showDetail.value = true
    visible.value = true
    form.informationId = data.informationId
    form.title = data.title
    form.content = data.content
    form.publishStatus = data.publishStatus
  }

  const reset = () => {


  }
  const handleValueChange = (event) => {

  }

  const closeOnLineDialog = () => {
    publishVisible.value = false
    selectedCategory.value = null
    selectedHotspot.value = false
    selectedToAllUser.value = false
  }

  const publishSubmit = async () => {
    let informationId = form.informationId
    let data = {
      informationId: informationId,
      informationCategoryId: selectedCategory.value,
      publishStatus: 1,
      toAllUser: selectedToAllUser.value ? '1': '0',
      hotspot: selectedHotspot.value ? '1': '0'
    }
    const [err, res] = await to(updateStatus(data))
    if (res) {
      closeOnLineDialog()
      visible.value = false
      let params = {
        pageNum: 1,
        pageSize: pageSize.value,
      }
      search(params);
      clearForm();
    }
  }

  /** 查询工单类型下拉树结构 */
  const getInformationCategoryTree = async () => {
    const [err, res] = await to(informationCategoryTreeSelect())
    if (res) {
      informationCategoryOptions.value = res.data ?? []
    }
  }

  onMounted(() => {
    const options = {
      children: 'children',
      label: 'categoryName'
    }
    defaultProps.value = options
    authorizeHeader.value = {
      Authorization: 'Bearer ' + getToken()
    }
    getInformationCategoryTree()
  })

  onUnmounted(() => {
    showTree.value = false
  })


</script>
<style scoped>
  :deep(.statusClass .el-radio-group) {
    width: 100%;
    justify-content: space-between;

  .el-radio {
    margin-right: 0;
  }

  }

  :deep(.del) {
    margin-left: 12px;
  }

  .warp-main {
    margin: 10px;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: auto;
    height: 100%;
  }

  .doc_left {
    border-right: 10px solid #f4f4f4;
    width: 18%;
    height: 100%;
    margin: 5px;
    padding: 5px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: scroll;

  }
  .tree-container{
    margin: 5px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
  }

  .doc_right {
    width: 82%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .doc_right-container {
    width: 100%;
    height: 100%;
  }

  .doc_top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin: 25px;
    font-size: 28px;
    font-weight: bold;
  }

  .el-tree > .el-tree-node {
    display: inline-block;
    min-width: 100%;
  }

  .tree-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .resource-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-weight: bold;
  }

  a:visited {
    color: black;
  }

  .option-card-button {
    width: 100%;
    margin-left: 0;
    font-size: 10px;
    border-radius: 0;
  }

  .header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .button-container {
    width: auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }

  .button-container-item {
    margin-right: 5px;
  }

  .title-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .detail-title {
    font-size: 25px;
    font-weight: bold;
  }

  .group {
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 10px;
  }

  .group-item {
    margin: 10px;
  }

  .publish-status-published {
    margin: 10px;
  }

  :deep(.md-editor-preview) {
    display: flex;
    flex-direction: column;
  }

  .my-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .publish-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
  }
  .publish-strategy-container{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }
</style>
